<template>
    <div>
        <el-form :rules="rules" ref="registerForm" :model="registerForm" label-width="100px" :label-position="labelPosition" >
            <el-form-item prop="name" label="昵称：">
                <el-input type="text" v-model="registerForm.name" placeholder="请输入昵称"/>
            </el-form-item>
            <el-form-item prop="email" label="邮箱：">
                <el-input type="text" v-model="registerForm.email" placeholder="请输入您的邮箱"/>
            </el-form-item>
            <el-form-item prop="password" label="密码：">
                <el-input type="password" v-model="registerForm.password" placeholder="请输入密码"/>
            </el-form-item>
            <el-form-item prop="confirmPassword" label="确认密码：">
                <el-input type="password" v-model="registerForm.confirmPassword" placeholder="请再次输入密码"/>
            </el-form-item>
            <el-form-item prop="code" label="验证码：">
                <el-input type="text" v-model="registerForm.code" placeholder="点击图片更换验证码" class="captcha" style="float: left;width: auto"/>
                <img :src="captchaUrl" @click="fnUpdateCaptcha" class="captchaImg" style="float: right;width: 82px"/>
            </el-form-item>
            <el-form-item prop="username">
                <el-input type="username" v-model="registerForm.username" placeholder="请输入您的自定义账号"/>
            </el-form-item>
        </el-form>
        <el-button type="primary" style="width: 30%;margin: auto;display: block" @click="registerNow">注册</el-button>
    </div>
</template>

<script>
    import {login} from "../../utils/login";

    export default {
        name: "register",
        data() {
            return {
                labelPosition:'right',      //表单表头对其方向
                captchaUrl: '/timeapi/' + this.$store.state.loginServiceApi + '/captcha?time=' + new Date(),    //获取验证码
                loginServiceApi: this.$store.state.loginServiceApi, //登录请求接口头
                registerForm: {             //注册表单数据
                    name: '',
                    email: '',
                    password: '',
                    confirmPassword: '',
                    username: '',         //管理员登录可以自定义账号
                    code: '' // 验证码

                },
                rules: {
                    name: [
                        {required: true, message: '请输入昵称', trigger: 'blur'}
                    ],
                    password: [
                        {required: true, message: '请输入密码', trigger: 'blur'}
                    ],
                    email: [
                        {required: true, message: '请输入邮箱', trigger: 'blur'}
                    ],
                    confirmPassword: [
                        {required: true, message: '请再次确认密码', trigger: 'blur'}
                    ],
                    code: [
                        {required: true, message: '请输入验证码', trigger: 'blur'}
                    ]
                }
            }
        },
        methods: {
            //注册
            registerNow() {
                this.$refs.registerForm.validate(data => {
                    if (data) {
                        this.postRequest(this.loginServiceApi + '/login/register', this.registerForm).then(res => {
                            if (res.code) {
                                let loginData = {
                                    username: this.registerForm.email,
                                    password: this.registerForm.password,
                                    code: this.registerForm.code,
                                }
                                login(loginData, this)
                            }else{
                                this.fnUpdateCaptcha()
                            }
                        })
                    } else {
                        this.$message.error('请输入所有字段！')
                        return false;
                    }
                })
            },
            //获取验证码
            fnUpdateCaptcha() {
                this.captchaUrl = '/timeapi/' + this.loginServiceApi + '/captcha?time=' + new Date()
            },
        }
    }
</script>

<style scoped>

    .loginTitle {
        margin: 0 auto 40px auto;
        text-align: center;
    }

    .captcha {
        width: 250px;
        margin-right: 10px;
    }

    .captchaImg {
        width: 100px;
    }

    .loginTitle {
        margin: 0px auto 20px auto;
        text-align: center;
    }

    .el-form-item__content {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    ::v-deep .el-input {
        position: relative;
        font-size: 14px;
        display: inline-block;
        width: -webkit-fill-available;
    }
</style>
